<template>
    <div class="headers">
        <div class="left">
            <IconFont name="setting" size="24px"></IconFont>
        </div>
        <div class="right">
            <IconFont name="message" size="24px"></IconFont>
            <IconFont name="share" size="24px"></IconFont>
        </div>
    </div>
    <el-scrollbar class="scrollbar" width="400px" height="700px">
        <div class="avatar">
            <el-avatar class="img" :src="avatar" @click="toLogin"/>
            <div class="info">
                <div class="row">
                    <span class="username">{{ userData.user_name}}</span>
                    <svg class="icon">
                        <use xlink:href="#icon-tongpai-"></use>
                    </svg>
                    <span></span>
                    <span class="level">LV.{{ userData.level }}</span>
                </div>
                <el-button class="edit">
                    <svg class="icon">
                        <use xlink:href="#icon-qianbi"></use>
                    </svg>
                    补全资料 +500经验值
                </el-button>
            </div>
        </div>
        <div class="introduct">
            <el-row class="bold">
                <el-col :span="4">{{ userData.profession }}</el-col>
                <el-col :span="6">{{ userData.sex }}</el-col>
            </el-row>
            <el-row>
                <el-col>{{ userData.intro }}</el-col>
            </el-row>
        </div>
        <div class="statistics">
            <el-row>
                <el-col :span="4" @click="to('/follow','0')">
                    <el-statistic :value="countData.followCount" />
                    <span class="title">关注</span>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="4" @click="to('/follow', '1')">
                    <el-statistic :value="countData.fanCount" />
                    <span class="title">粉丝</span>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="4">
                    <el-statistic :value="0" />
                    <span class="title">被收藏</span>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="4">
                    <el-statistic :value="0" />
                    <span class="title">被学做</span>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="4">
                    <el-statistic :value="20" />
                    <span class="title">经验值</span>
                </el-col>
            </el-row>
        </div>
        <div class="vip">
            <div class="col">
                <svg class="icon">
                    <use xlink:href="#icon-VIP1"></use>
                </svg>
                <el-row>
                    <el-col class="yellow">尊享VIP卡</el-col>
                    <el-col>科学饮食轻松带你瘦 ></el-col>
                </el-row>
                <svg class="icon">
                    <use xlink:href="#icon-jinbi"></use>
                </svg>
                <el-row>
                    <el-col class="yellow">签到领钱</el-col>
                    <el-col>做任务赢现金 ></el-col>
                </el-row>
            </div>
        </div>
        <div class="list">
            <div class="row" v-for="item in list" :key="item.id" @click="to(item.path)">
                <div>
                    <svg class="icon">
                        <use :xlink:href="item.icon"></use>
                    </svg>
                </div>
                <div><span>{{ item.title }}</span></div>
            </div>
        </div>
        <el-menu 
        :default-active="activeIndex" 
        class="el-menu-demo" 
        mode="horizontal" 
        @select="handleSelect">
            <el-menu-item index="0">菜谱</el-menu-item>
            <el-menu-item index="1">笔记</el-menu-item>
        </el-menu>
        <div class="content">
            <note v-show="activeIndex == 1"/>
            <cookbook v-show="activeIndex == 0"/>
        </div>
        <el-affix position="bottom" :offset="80">
            <el-button type="primary">+发布笔记</el-button>
        </el-affix>
    </el-scrollbar>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import note from '../../component/note.vue';
import cookbook from '../../component/cookbook.vue';
import http from '../../tools/axios';
const router = useRouter();
const userId = localStorage.getItem('userId');
const isLogin = localStorage.getItem('isLogin');
const userData = ref(
    {
        "user_name": '游客',
        "level": '0',
        "profession": '未知',
        "sex": '未知',
        "intro": '未知'
    }
);
const countData = ref(
    {
        "fanCount": 0,
        "followCount": 0,
    }
);
const toLogin = () => {
    if (!isLogin){
        router.push('/login');
    }
}
const getUser = async (userId)=>{
    http.get('/user/info',{params: {'user_id': userId}}).then((res)=>{
        console.log(res);
        if(res.data.code === 0){
            userData.value = res.data.data[0];
            console.log(userData.value);

        }else{
            console.log('error');
        }
        
    })
}
const getCount = async (userId)=>{
    http.get('/user/statistics',{params: {'user_id': userId}}).then((res)=>{
        console.log(res);
        if(res.data.code === 200){
            countData.value = res.data.data[0];
            console.log(countData.value);
        }else{
            console.log('error');
        }
    })
}
if(isLogin){
    getUser(userId);
    getCount(userId);
}
const avatar = ref('https://tse4-mm.cn.bing.net/th/id/OIP-C.ztUt10fQ6GVGvRp3w9tiQgAAAA?w=177&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7')
const list = ref([
    { id: 1, path: '', icon: '#icon-chuangzuozhezhongxin', title: '创作者中心' },
    { id: 2, path: '', icon: '#icon-caogaoxiang', title: '草稿箱' },
    { id: 3, path: '', icon: '#icon-vip', title: 'vip专享' },
    { id: 4, path: '', icon: '#icon-cook', title: '厨具管理' },
    { id: 5, path: '', icon: '#icon-zuijinliulan', title: '最近浏览' },
    { id: 6, path: '/purchaseList', icon: '#icon-yilingliao', title: '采购清单' },
    { id: 7, path: '', icon: '#icon-ketang', title: '课程·电子书' },
    { id: 8, path: '', icon: '#icon-qianbao', title: '钱包' },
    { id: 9, path: '', icon: '#icon-youhuiquan', title: '优惠劵' },
    { id: 10, path: '', icon: '#icon-dingdan', title: '订单' },
])
const to = (path, value) =>{
    if (isLogin){
        router.push({path: path, query:{value: value}});
    }
}
const activeIndex = ref('1')
const handleSelect = (index) => {
    activeIndex.value = index;
}

</script>
<style lang="scss">
.icon {
    width: 24px;
    height: 24px;
}

.headers {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
    margin-top: 22px;
    padding: 0 30px;
}

.headers .right {
    display: flex;
    width: 70px;
    justify-content: space-between;
}

.scrollbar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px;
}

.avatar {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 30px 0;
}

.avatar .img {
    width: 80px;
    height: 80px;
    border-radius: 40px;
}

.avatar .info {
    display: flex;
    flex-direction: column;
    width: 240px;
    height: 60px;
    margin: 0 20px;
}

.avatar .info .username {
    font-size: 24px;
}

.avatar .info .level {
    color: #cdb165;
    font-weight: bold;
    font-style: italic;
}

.avatar .info .edit {
    color: #2c2b2a;
    border: none;
    border-radius: 20px;
    background-color: #f6c753;
    margin: 10px 0;
}

.introduct {
    margin: 10px 0;
}

.introduct .el-row .el-col {
    height: 30px;
    color: #a8a8a8;
}

.introduct .bold .el-col {
    color: #484848;
    font-weight: bold;
}

.statistics .el-col {
    text-align: center;
}
.vip {
    display: flex;
    align-items: center;
    width: 96%;
    height: 60px;
    color: #fff;
    border-radius: 15px;
    background-color: #414141;
    margin: 20px auto;
}
.vip .col {
    display: flex;
    font-size: 12px;
}
.vip .col .yellow{
    color: #ecd694;
    font-size: 16px;
}
.vip .icon {
    width: 36px;
    height: 36px;
    margin: 0 8px;
}
.list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.list .row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 65px;
    height: 80px;
    font-size: 12px;
    margin-right: 3px;
}
.list .icon {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
}
.el-menu-demo {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.el-menu-demo .el-menu-item {
    font-size: 18px;
    margin: 0 65px;
    padding: 0;
}
.el-menu--horizontal.el-menu{
    border: none;
}
.el-menu-demo .el-menu-item{
    cursor: none;
}
.el-menu--horizontal>.el-menu-item.is-active{
    color: #cdb165 !important;
    border-bottom: 3px solid #cdb165;
}
.el-affix{
    text-align: center;
}
.el-affix .el-button{
    font-weight: bold;
    color: #3a362c;
    background-color: #f6c753;
    border: none;
    border-radius: 20px;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, 
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
    color: #f6c753;
    background-color: #fff;
}
</style>